<template>
	<div class="index-card">
		<!-- 进度条 -->
		<div class="index-card-progress">
			<div class="item" v-for="item in dataListInit" :key="item.id">
				<div class="title">{{ item.label }}</div>
				<div class="progress">
					<a-progress :stroke-width="10" :percent="item.stage / 100" />
				</div>
			</div>
		</div>
		<!-- 卡片列表 -->
		<div :class="['index-card-body', { 'height': filterList?.length > 0 }]" @scroll="handleScroll">
			<template v-for="(item, itemIndex) in dataListInit" :key="item.id">
				<div :class="['item-list', { border: !item?.list?.list.length }]">
					<template v-if="item?.list?.list.length">
						<div class="item" v-for="child in item.list.list" :key="child.id" @click="handleBtn('detail', child)">
							<div >
								<div class="title" @click="handleBtn('detail', child)">
									<a-input v-model="child.nick" @keyup.enter="$event.target.blur()" @focus="currentRow = child" @blur="handleSubmit($event, 'nick', false, itemIndex)" 
										:class="['edit-fields-normal']" @click.stop/>
								</div>
								<div class="price">
									<span class="old" v-if="child.money1">${{ child.money1 }}</span>
									<span v-if="child.money2">${{ child.money2 }}</span>
								</div>
								<div>
									<a-input v-model="child.name" @keyup.enter="$event.target.blur()" @focus="currentRow = child" @blur="handleSubmit($event, 'name', false, itemIndex)" 
										:class="['edit-fields-normal']" @click.stop/>
								</div>
								<div class="tags">
									<a-tag v-for="tag in child?.tagList" :key="tag.id" size="small">{{ tag.label }}</a-tag>
								</div>
							</div>
							<div class="item-4 flex">
								<span>{{ child.updateTime }}</span>
								<i class="EachApp EachApp_jihui" @click.stop="handleBtn('edit', child)"></i>
								<span>{{ child.creatorName || "-" }}</span>
							</div>
						</div>
					</template>
					<a-empty description="暂无数据" v-else />
				</div>
			</template>
		</div>
	</div>
</template>
<script lang="ts" setup>
import * as Api from "@/api/customerManage/customer";
import { isSame } from "@/utils/index";
import mixin from "@/mixins/index";
const { handleMixinBlur, handleMixinSubmit } = mixin();
const emit = defineEmits(["refreshList"]);
const message = useMessage();
const getEmit = inject('getEmit');
const getList = inject('getList');
const dataListInit = ref([]);
const dataListInit2 = ref([]);
const currentRow = ref({});
const router = useRouter();
const props = defineProps({
	dataList: {
		type: Array,
		default: () => {
			return [];
		}
	},
	filterList: { type: Array, default: () => { return [] } }
});
watch(
	() => props.dataList,
	(value) => {
		dataListInit.value = value || [];
		dataListInit2.value = JSON.parse(JSON.stringify(value));
	},
	{ immediate: true }
);
// 提交  keys修改的关键字  isEmpty是否可以为空
const handleSubmit = async (event, keys, isEmpty = false, itemIndex) => {
	if(event){
		event.target.blur();
		if(!isEmpty && !event.target.value){
			return message.warning('该值不能为空，请重新填写!');
		}
	}
	if(currentRow.value?.id){
		// 找到原数据
		const oldRow = dataListInit2.value[itemIndex].list.list.find(item => item.id === currentRow.value.id);
		// 是否修改过
		const same = isSame(oldRow, currentRow.value, "isEdit");
		console.log('oldRow===', {...oldRow});
		console.log('newRow===', {...currentRow.value});
		console.log('是否一样===', same);
		if(!same){
			await handleMixinSubmit(Api.ApiUpdate, currentRow.value, '', false);
			currentRow.value = {};
			getList();
		}
		dataListInit.value.forEach(item => {
			return item.list?.list?.map(item => {
				return item.isEdit = false;
			})
		});
	}
}

// 按钮处理
const handleBtn = (type, value) => {
	if (type === "detail") {
		if (value.isEdit) return;
		router.push({ path: "/customer/detail", query: { id: value.id } });
	} else if (type === "edit") {
		
	}
};
// 触底加载
const handleScroll = () => {
	const container = event.target;
	if (container.scrollHeight - container.scrollTop <= container.clientHeight) {
		console.log('触底====');
		getEmit({ emitType: 'loading' });
	}
};
</script>
